<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>一个重要的内置关系</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--
    1.一个重要的内置关系：VueComponent.prototype.__proto__ === Vue.prototype;
    2.为什么要有这个关系：让组件实例对象（vc）可以访问到Vue原型上的属性、方法。
-->
<div id="root">
    <school></school>
</div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false;
    Vue.prototype.x = 99;
    // 定义一个构造函数
    /* function Demo() {
         this.a = 1;
         this.b = 2;
     }

     // 创建一个Demo的实例对象
     const d = new Demo();


     // 显示原型属性(函数)
     console.log(Demo.prototype);
     // 隐式原型属性（实例对象）
     console.log(d.__proto__);
     console.log(Demo.prototype === d.__proto__);

     // 程序员通过显示原型属性操作原型对象，追加一个x属性，值为99
     Demo.prototype.x = 99;
     console.log('@', d);*/


    // 1、定义school组件
    const school = Vue.extend({
        name: 'school',
        template: `
          <div>
          <h1>学校名称:{{ schoolName }}</h1>
          <h1>学校地址:{{ address }}</h1>
          <button @click="showX">点我输出x</button>
          </div>
        `,
        data() {
            return {
                schoolName: '尚硅谷',
                address: '北京昌平'

            }
        },
        methods: {
            showX() {
                console.log(this.x);
            }
        }
    });

    // 创建一个vm
    new Vue({
        el: '#root',
        data: {
            msg: '你好'
        },
        components: {
            school
        }
    })
</script>
</html>
